<template>
  <div v-loading="loading" :style="{height:(wrapperHeight+94)+'px'}">
    <el-card v-show="isGood==1" :body-style="{height:(wrapperHeight+94)+'px',position:'relative'}">
      <img :src="goodUrl" class="good-img">
      <span class="good-text">很好，暂无情况！</span>
    </el-card>
    <div v-show="isGood==2">
      <div class="farm-card-wrap">
        <card-item v-for="(item, index) in farmCardList" :ref="'cardFlexItem'+item.id" :key="index"
                   class="card-flex-item"/>
      </div>
      <el-card :style="{height:wrapperHeight+'px',marginTop:'16px'}">
        <div class="farm-warn-item-wrap" v-for="item in farmWarnList" :key="item.key" v-if="item.hide">
          <img :src="item.imgUrl"/>
          <div class="farm-item-wrap">
            <div class="farm-item-title">{{item.title}}</div>
            <div class="farm-item-time">时间:&nbsp;{{item.time}}</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
    import CardItem from './component/card'
    const moment = require("moment")
    import {
        getWarnCount
    } from "@/api/warn"
    export default {
        components: {
            "card-item": CardItem
        },
        data() {
            return {
                loading: false,
                isGood: 0, // 0 加载中  1 好的 2 有异常
                goodUrl: require("@/assets/img/farm/good.png"),
                farmWarnList: [
                    {
                        key: 1,
                        title: "库存预警",
                        time: "2021-11-11 11:11:11",
                        imgUrl: require('@/assets/img/farm/kucunyujing.png'),
                        hide: true,
                    }, {
                        key: 2,
                        title: "任务超期告警",
                        time: "",
                        imgUrl: require('@/assets/img/farm/renwuchaoqi.png'),
                        hide: true,
                    }, {
                        key: 3,
                        title: "气象预警",
                        time: "",
                        imgUrl: require('@/assets/img/farm/qixiangyujing.png'),
                        hide: true,
                    }, {
                        key: 4,
                        title: "病虫害预警",
                        time: "",
                        imgUrl: require('@/assets/img/farm/bingchonghai.png'),
                        hide: true,
                    }, {
                        key: 5,
                        title: "巡田预警",
                        time: "",
                        imgUrl: require('@/assets/img/farm/xuntianyujing.png'),
                        hide: true,
                    }, {
                        key: 6,
                        title: "设备预警",
                        time: "",
                        imgUrl: require('@/assets/img/farm/shebeiyujing.png'),
                        hide: true,
                    }
                ],
                wrapperHeight: 0,
                farmCardList: []
            }
        },
        created() {
            this.$dynamic(
                window,
                document,
                218,
                (height) => {
                    this.wrapperHeight = height
                    console.log("this.wrapperHeight", this.wrapperHeight)
                }
            );
        },
        mounted() {
            this.getCardInfoList()
        },
        beforeDestroy() {
            this.$unResize(window)
        },
        methods: {
            async getCardInfoList() {
                this.loading = true
                const response = await getWarnCount()
                const {code,data} = response.data
                if(code==200){
                    const {stockWarn, task, meteorological, farmPestsLevel, inspection, alarm} = data
                    if(stockWarn==0 && task==0 && meteorological==0 &&
                        farmPestsLevel==0 && inspection==0 && alarm==0){
                        this.isGood = 1
                    }else{
                        this.farmCardList = [
                            {id: 1, bgColor: "#009865", label: "巡田预警", count: inspection*1},
                            {id: 2, bgColor: "#e84244", label: "库存预警", count: stockWarn*1},
                            {id: 3, bgColor: "#fe9900", label: "任务超期告警", count: task*1},
                            {id: 4, bgColor: "#ef6920", label: "病虫害预警", count: farmPestsLevel*1},
                            {id: 5, bgColor: "#5970fe", label: "气象预警", count: meteorological*1},
                            {id: 6, bgColor: "#00abf0", label: "设备预警", count: alarm*1}
                        ]
                        this.farmWarnList = this.farmWarnList.map(item=>{
                            item['time'] = moment(new Date().getTime()).format("YYYY/MM/DD HH:mm:ss")
                            return item
                        })
                        this.$nextTick(() => {
                            this.farmCardList.forEach(item => {
                                // 由于后端不给返回时间，前端自己添加
                                this.$refs['cardFlexItem' + item.id][0].init(item)
                            })
                            this.isGood = 2
                            this.loading = false
                        })
                    }
                }else{
                    this.isGood = 0
                }
                this.loading  = false
            }
        }
    }
</script>
<style scoped>
  .farm-card-wrap {
    display: flex;
  }

  .farm-card-wrap .card-flex-item {
    flex: 1;
    margin: 0 8px;
  }

  .farm-card-wrap .card-flex-item:first-child {
    margin-left: 0px;
  }

  .farm-card-wrap .card-flex-item:last-child {
    margin-right: 0px;
  }
  .farm-warn-good{
    height:100%;
    background: #5daf34;
  }
  .farm-warn-item-wrap {
    align-items: center;
    display: flex;
    width: 100%;
    height: 80px;
    background: #f1faf7;
    border-radius: 8px;
    margin-bottom: 20px;
  }

  .farm-warn-item-wrap:hover {
    cursor: pointer;
    background: #b2ffc0;
  }

  .farm-warn-item-wrap img {
    margin-left: 20px;
    width: 50px;
    height: 50px;
  }

  .farm-item-wrap {
    margin-left: 20px;
  }

  .farm-item-title {
    padding-top: 10px;
    font-size: 18px;
    font-weight: bolder;
    color: #333;
  }

  .farm-item-time {
    padding-top: 10px;
    font-size: 16px;
    color: #333;
  }
  .good-img{
    position: absolute;
    top: 40%;
    left: 50%;
    width: 340px;
    transform: translateX(-50%) translateY(-50%);
  }
  .good-text{
    position: absolute;
    color: #039d69;
    font-size: 28px;
    top: 64%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
</style>
